<template>
  <div class="app">
    <van-nav-bar
      title="意见反馈"
      left-text=""
      right-text="历史反馈"
      left-arrow
      class="colnav"
      @click-left="backlink"
      @click-right="onClickRight"
    ></van-nav-bar>
    <div class="main-card">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">问题描述</div>
      </div>
      <van-field
        v-model="question"
        autosize
        class="textarea"
        type="textarea"
        maxlength="300"
        placeholder="欢迎留下您宝贵的意见"
        show-word-limit
      />
    </div>
    <div class="main-card">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">上传图片</div>
      </div>
      <div class="uploadbox">
        <van-uploader v-model="images" multiple :after-read="afterRead" />
      </div>
    </div>
    <div class="main-card">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">联系方式</div>
      </div>
      <div class="inputbox">
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
          <van-field
            v-model="contact"
            placeholder="请留下您的联系方式以便和您联系"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="tijiaobox">
      <van-button type="primary" class="tijiaobtn" @click="postfeedback"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { addfeedback } from "@/http/request.js";
import { showToast } from "vant";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      question: "",
      contact: "",
      images: [],
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    onClickRight() {},
    afterRead() {},
    postfeedback() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      let formdata = new FormData();
      formdata.append("question", this.question);
      formdata.append("id", userinfo.id);
      formdata.append("contact", this.contact);
      formdata.append("images", this.images);
      addfeedback(formdata).then((res) => {
        showToast(res.msg);
      });
    },
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f2f3f5;
  min-height: 100vh;
}
.colnav :deep(.van-nav-bar__right .van-nav-bar__text){
  color: #636363;
}
.main-card {
  width: 90%;
  margin: 15px auto;
}
.boxtitle {
  display: flex;
  align-items: center;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 5px;
  font-weight: 550;
}
.main-card .textarea {
  border-radius: 10px;
  margin-top: 10px;
  min-height: 150px;
}
.uploadbox {
  background-color: white;
  margin-top: 10px;
  border-radius: 10px;
  height: 100px;
  position: relative;
}
.uploadbox .van-uploader {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.inputbox {
  background-color: white;
  border-radius: 10px;
  margin-top: 10px;
}
.tijiaobox {
  margin: 50px auto;
  display: flex;
  justify-content: center;
}
.tijiaobtn {
  width: 90%;
  min-width: 150px;
  height: 45px;
  border-radius: 25px;
}
</style>

<style>
.uploadbox .van-uploader .van-uploader__upload {
  margin: 0 !important;
}
</style>